<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<component-a></component-a>
			<hr />
			<component-b></component-b>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//创建一个空实例(消息中转站)
			let bus = new Vue();
			let vm = new Vue({
				el:'#app',
				components:{
					'component-a' : {
						data:function(){
							return {
								msg: '我是组件A',
								sendMsg: '这是发送给B组件的消息'
							};
						},
						template:`
							<div>
								<h3>{{msg}}</h3>
								<button type="button" @click="send()">组件A发送事件</button>
							</div>
						`,
						methods:{
							send:function(){
								bus.$emit("msg",this.sendMsg);
							}
						}
					},
					'component-b' : {
						data:function(){
							return {
								msg: '我是组件B',
								msg1:''
							};
						},
						template:`
						<div>
							<h3>{{msg}}</h3>
							<h3>接受A组件的消息：{{msg1}}</h3>
						</div>
						`,
						mounted:function(){
							/* 两种接受方法，主要在于this的用法 */
							bus.$on('msg',function(message){
								this.msg = this.msg + '+嘿嘿';
								this.msg1 = message;
							}.bind(this))
							// var _this = this;
							// bus.$on('msg',function(message){
							// 	_this.msg = _this.msg + '+嘿嘿';
							// 	_this.msg1 = message;
							// })
						}
					}
				}
			})
		</script>
	</body>
</html>
